<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>菜单管理</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<link rel="stylesheet" href="js/jqueryUI/jquery-ui.min.css">
		<script src="js/jquery-1.8.2.min.js"></script>
		<script src="js/jqueryUI/jquery-ui.min.js"></script>
		<style>
		.none{display: none;}
			.theadUl {
				background-color: #eee;
			}
			
			.theadUl li {
				display: inline-block;
				line-height: 40px;
			}
			
			.titem {
				cursor: pointer;
				width: 100%;
				height: 40px;
				border-bottom: 1px solid #ddd;
			}
			
			.W120 {
				width: 150px;
			}
			
			.W70 {
				width: 70px
			}
			
			.W250 {
				width: 280px
			}
			
			.W120 {
				width: 120px
			}
			
			.W220 {
				width: 215px
			}
			
			.titem:hover {
				background: #e7f6fb;
			}
			
			.childUl {
				height: 40px;
			}
			
			.childUl li {
				line-height: 40px;
				height: 40px;
			}
			
			.childUl i.icon {
				height: 20px;
			}
		</style>

	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/adminMenu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem active">
							<a href="productManage.html#productManage">菜单管理</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form">
						<div>
							<span class="btn  fl sortBegin group">调整排序</span>
							<span class="btn  fl sortDone none group">保存顺序</span>

							<span class="btn blue addPro  fr"><i class="icon icon_add blue"></i> 添加菜单</span>
						</div>
						<div class="clearfix"></div>

					</div>
					<div class="table">
						<div class="tablelist" style="margin-top:20px;">
							<div>
								<ul class="theadUl over-hidden border">
									<li class="W120 text-center">菜单名称</li>
									<li class="W70 text-center">排序</li>
									<li class="W250 text-center">链接</li>
									<li class="W120 text-center">权限标识</li>
									<li class="W70 text-center">状态</li>
									<li class="W220 text-center">操作</li>
								</ul>
							</div>
							<div class="aacontainer">
								<ul id="itemContainer" class=" border" style="margin-bottom:20px;border-top:none;border-bottom:none;">
									<li class="titem" data-sort='1' data-id='1'>
										<ul class="childUl">
											<li class="W120 text-center">
												<p class="aa">菜单管理1</p>
											</li>
											<li class="W70 text-center">
												<p class="sortresult">1</p>
											</li>
											<li class="W250 text-center">
												<p>/qrcode/consume/list</p>
											</li>
											<li class="W120 text-center">
												<p>sys；user；</p>
											</li>
											<li class="W70 text-center">显示 </td>
												<li class="W220 text-center">
													<div>
														<div class=" inline-block editmenu hover" data-id='1'><i class="icon icon_edit"></i> <span>修改</span></div>
														<div style="margin-left:20px;" class="deletemenu hover inline-block " data-id='1'><i class="icon icon_delete"></i> <span>删除</span></div>
													</div>
												</li>
										</ul>
										</li>

										<li class="titem" data-sort='2' data-id='2'>
											<ul class="childUl">
												<li class="W120 text-center">
													<p class="aa">菜单管理2</p>
												</li>
												<li class="W70 text-center">
													<p class="sortresult">2</p>
												</li>
												<li class="W250 text-center">
													<p>/qrcode/consume/list</p>
												</li>
												<li class="W120 text-center">
													<p>sys；user；</p>
												</li>
												<li class="W70 text-center">显示 </td>
													<li class="W220 text-center">
														<div>
															<div class=" inline-block editmenu hover" data-id='2'><i class="icon icon_edit"></i> <span>修改</span></div>
															<div style="margin-left:20px;" class="deletemenu hover inline-block " data-id='2'><i class="icon icon_delete"></i> <span>删除</span></div>
														</div>
													</li>
											</ul>
											</li>

											<li class="titem" data-sort='3' data-id='3'>
												<ul class="childUl">
													<li class="W120 text-center">
														<p class="aa">菜单管理3</p>
													</li>
													<li class="W70 text-center">
														<p class="sortresult">3</p>
													</li>
													<li class="W250 text-center">
														<p>/qrcode/consume/list</p>
													</li>
													<li class="W120 text-center">
														<p>sys；user；</p>
													</li>
													<li class="W70 text-center">显示 </td>
														<li class="W220 text-center">
															<div>
																<div class=" inline-block editmenu hover" data-id='3'><i class="icon icon_edit"></i> <span>修改</span></div>
																<div style="margin-left:20px;" class="deletemenu hover inline-block " data-id='3'><i class="icon icon_delete"></i> <span>删除</span></div>
															</div>
														</li>
												</ul>
												</li>

												<li class="titem" data-sort='4' data-id='4'>
													<ul class="childUl">
														<li class="W120 text-center">
															<p class="aa">菜单管理4</p>
														</li>
														<li class="W70 text-center">
															<p class="sortresult">4</p>
														</li>
														<li class="W250 text-center">
															<p>/qrcode/consume/list</p>
														</li>
														<li class="W120 text-center">
															<p>sys；user；</p>
														</li>
														<li class="W70 text-center">显示 </td>
															<li class="W220 text-center">
																<div>
																	<div class=" inline-block editmenu hover" data-id='4'><i class="icon icon_edit"></i> <span>修改</span></div>
																	<div style="margin-left:20px;" class="deletemenu hover inline-block " data-id='4'><i class="icon icon_delete"></i> <span>删除</span></div>
																</div>
															</li>
													</ul>
													</li>

								</ul>
							</div>

							<!--<table>
								<thead>
									<tr>
										<th>菜单名称</th>
										<th>排序</th>
										<th>链接</th>
										<th>权限标识</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr class="titem" data-sort='1' data-id='1'>
										<td>
											<p class="aa">菜单管理1</p>
										</td>
										<td>
											<p class="sortresult">1</p>
										</td>
										<td>

											<p>/qrcode/consume/list</p>
										</td>
										<td>
											<p>sys；user；</p>
										</td>
										<td>显示 </td>
										<td>
											<div>
												<div class=" inline-block editmenu hover" data-id='1'><i class="icon icon_edit"></i> <span>修改</span></div>
												<div style="margin-left:20px;" class="tabletop deletemenu hover inline-block " data-id='1'><i class="icon icon_delete"></i> <span>删除</span></div>
											</div>
										</td>
									</tr>

									<tr class="titem" data-sort='2' data-id='2'>
										<td>
											<p class="aa">菜单管理2</p>
										</td>
										<td>
											<p class="sortresult">1</p>
										</td>
										<td>
											<p>/qrcode/consume/list</p>
										</td>
										<td>
											<p>sys；user；</p>
										</td>
										<td>显示 </td>
										<td>
											<div>
												<div class=" inline-block editmenu hover" data-id='1'><i class="icon icon_edit"></i> <span>修改</span></div>
												<div style="margin-left:20px;" class="tabletop deletemenu hover inline-block " data-id='1'><i class="icon icon_delete"></i> <span>删除</span></div>
											</div>
										</td>
									</tr>

									<tr class="titem" data-sort='3' data-id='3'>
										<td>
											<p class="aa">菜单管理3</p>
										</td>
										<td>
											<p class="sortresult">1</p>
										</td>
										<td>
											<p>/qrcode/consume/list</p>
										</td>
										<td>
											<p>sys；user；</p>
										</td>
										<td>显示 </td>
										<td>
											<div>
												<div class=" inline-block editmenu hover" data-id='1'><i class="icon icon_edit"></i> <span>修改</span></div>
												<div style="margin-left:20px;" class="tabletop hover deletemenu inline-block " data-id='1'><i class="icon icon_delete"></i> <span>删除</span></div>
											</div>
										</td>
									</tr>

									<tr class="titem" data-sort='4' data-id='4'>
										<td>
											<p class="aa">菜单管理4</p>
										</td>
										<td>
											<p class="sortresult">1</p>
										</td>
										<td>
											<p>/qrcode/consume/list</p>
										</td>
										<td>
											<p>sys；user；</p>
										</td>
										<td>显示 </td>
										<td>
											<div>
												<div class=" inline-block editmenu hover" data-id='1'><i class="icon icon_edit"></i> <span>修改</span></div>
												<div style="margin-left:20px;" class="tabletop hover deletemenu inline-block " data-id='1'><i class="icon icon_delete"></i> <span>删除</span></div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>-->
						</div>
					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<!--这里是删除产品的弹框（无法删除）-->

	</body>

	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var sortArray;

		function ajaxSort(sortArray) {
			console.log(sortArray);
		}
		$(function() {

			roleObj.addRole();
			roleObj.editRole();
			roleObj.deleteRole();

			$('.sortBegin ').click(function() {
				console.log('errrr');
				$('.sortBegin').addClass('none');
				$('.sortDone').removeClass('none');
				$("#itemContainer").sortable({
					containment: ".tablelist",
					placeholder: "nav_holder",
					//					helper:'clone',
					create: function(event, ui) {
						var obj = ui.item;
					},
					start: function(event, ui) {
						var obj = ui.item;
						var sort = $(obj).attr('data-sort');
						$(obj).css({
							'border-top': '1px solid #ddd',
							'border-bottom': '1px solid #ddd',
							background: "#e7f6fb",
						})

					},
					stop: function(event, ui) {
						var obj = ui.item;
						$(obj).css({
							'border-top': 'none',
							'border-left': 'none',
							'border-right': 'none',
							background: "none"
						})
						var sort = $(obj).prev().attr('data-sort'); //这个是移动到的位置
						sortArray = new Array();
						$('#itemContainer .titem').each(function(key, index) {
							$(this).attr('data-sort', key + 1);
							$(this).find('.sortresult').html(key + 1);
							sortArray[key] = {
								'id': $(this).attr('data-id'),
								'sort': $(this).attr('data-sort')
							};
						})
						ajaxSort(sortArray);
					},

				});
				$("#itemContainer").disableSelection();
			});
			
			$('.sortDone').click(function(){
				$('.sortBegin').removeClass('none');
				$('.sortDone').addClass('none');
				$( "#itemContainer" ).sortable( "destroy" );
			})

		})

		//分页提交 
		function submitFun(currentPage) {

		}

		//id:要删除的ID名称
		function deleteFun(id, index) {
			layer.close(index);
		}

		var roleObj = {
			'id': '',
			'_self': '',
			'addRole': function() {
				$('.addPro').click(function() {
					var a=layObj.open('addMenu.html', 580, 522, '添加菜单');
					console.log(a);
				})
			},
			"editRole": function() {
				_self = this;
				$('.editmenu').click(function() {
					_self.id = $(this).attr('data-id');
					layObj.open('addMenu.html', 580, 522, '添加菜单', _self.assignId);
				});
			},
			"assignId": function(layero, index) {
				var body = layer.getChildFrame('body', index);
				var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
				body.find('#aid').val(_self.id);
			},
			'deleteRole': function() {
				$('.deletemenu').click(function() {
					_self.id = $(this).attr('data-id');　　
					var yesarray = {
						'msg': '确定',
						'callback': _self.yseFun
					};
					var noarray = {
						'msg': '取消',
						'callback': _self.noFun
					};
					layObj.confirm('确定要删除该菜单么？', '删除', 400, 180, 'confirmclass', yesarray, noarray);
				});
			},
			'yseFun': function(index) {
				//_self.id：这个是要删除的ID名字
				var body = layer.getChildFrame('body', index);
				deleteFun(_self.id, index);

			},
			'noFun': function(index) {
				layer.close(index);
			}

		}
	</script>

</html>